const { resolve } = require("path");
// plugins 需要引入
const HtmlWebpackplugin = require("html-webpack-plugin");
// Webpack查找引用依赖包会从当前目录逐层往上级目录查找直到找到
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "built.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [ // 配置loader,不同类型的文件要配置不同的Loader
            {   // test 根据正则匹配文件
                test: /\.css$/,
                // use 处理匹配到的文件的Loader名称， 执行顺序从后到前依次执行
                use: [
                    "style-loader", // 创建style标签， 将js中的样式资源插入进去，添加到head中
                    "css-loader", // 将CSS文件变成commonjs模块加载到js中， 内容是样式字符串
                    "less-loader"
                ]
            },
            {   // test 根据正则匹配文件
                test: /\.less$/,
                // use 处理匹配到的文件的Loader名称， 执行顺序从后到前依次执行
                use: [
                    "style-loader", // 创建style标签， 将js中的样式资源插入进去，添加到head中
                    "css-loader", // 将CSS文件变成commonjs模块加载到js中， 内容是样式字符串
                    "less-loader" // 将less文件编译成css文件
                ]
            },
            {
                test: /\.(jpg|png|gif)/,
                loader: "url-loader", // 使用单个Loader的写法, url-loader依赖于file-loader.
                options: { // loader配置
                    limit: 8 * 1024, // 超出8 * 1024b 的图片会转化为base64
                }
            },
            {
                test: /\.html$/, 
                loader: "html-loader" // 处理html中的img,使其能被url-Loader处理
            },
            {  // 处理打包其他资源
                exclude: /\.(css|js|html|png|jpg|gif)/, // 排除正则匹配的这些文件
                loader: "file-loader"
            }
        ]
    },
    plugins: [ // 配置plugins
        new HtmlWebpackplugin({
            template: resolve(__dirname, 'src/index.html') // 创建的HTML的模板
        }) // 创建一个HTML, 自动引入打包输出所有的资源
    ],
    mode: "development",
    devServer: {  // 开发服务器
        contentBase: resolve(__dirname, "build"), // 运行项目的目录
        compress: true, // 启动gzip压缩
        port: 3001, // 项目运行的端口号
        open: true // 自动打开浏览器
    }
}